
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>课程数据截图</title>
      <style>
        /* 完全复制前端虚拟列表的样式 */
        .virtual-list {
          width: 100%;
          max-width: 800px;
          margin: 0 auto;
          position: relative;
          overflow-y: auto;
          background-color: #fff;
          border: 1px solid #e5e7eb;
          border-radius: 8px;
          box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        }
        .virtual-list-placeholder {
          width: 100%;
        }

        .virtual-list-content {
          width: 100%;
          position: static; /* 改为 static 避免绝对定位导致的布局问题 */
          box-sizing: border-box;
        }

        .virtual-list-ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .virtual-list-item {
          box-sizing: border-box;
          width: 100%;
          padding: 12px 16px;
          border-bottom: 1px solid #f0f0f0;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: all 0.2s ease;
        }

        .virtual-list-item:hover {
          background-color: #f8f9fa;
        }

        .virtual-list-content-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        }

        .item-label {
          font-weight: 500;
          color: #333;
          flex: 1;
          margin-right: 10px;
        }

        .item-data {
          color: #666;
          flex: 1;
          text-align: center;
        }

        /* 按钮样式 */
        .btn {
          padding: 6px 12px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .delete-btn {
          background-color: #f44336;
          color: white;
          margin-right: 5px;
        }

        .update-btn {
          background-color: #4caf50;
          color: white;
        }

        .delete-btn:hover {
          background-color: #d32f2f;
        }

        .update-btn:hover {
          background-color: #43a047;
        }

        /* 临时隐藏滚动条（截图时使用） */
        .virtual-list::-webkit-scrollbar {
          display: none;
        }
      </style>
    </head>
    <body>
      <div class="virtual-list">
        <div class="virtual-list-content">
          <ul class="virtual-list-ul">
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">阿萨</span>
                  <span class="item-data">90</span>
                  <span class="item-data">67</span>
                  <span class="item-data">87</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">昂达</span>
                  <span class="item-data">89</span>
                  <span class="item-data">77</span>
                  <span class="item-data">67</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">阿松大</span>
                  <span class="item-data">78</span>
                  <span class="item-data">78</span>
                  <span class="item-data">78</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">萨芬</span>
                  <span class="item-data">98</span>
                  <span class="item-data">89</span>
                  <span class="item-data">98</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">微软</span>
                  <span class="item-data">34</span>
                  <span class="item-data">34</span>
                  <span class="item-data">44</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">第三个</span>
                  <span class="item-data">23</span>
                  <span class="item-data">23</span>
                  <span class="item-data">23</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">请问</span>
                  <span class="item-data">22</span>
                  <span class="item-data">22</span>
                  <span class="item-data">12</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">撒地方</span>
                  <span class="item-data">77</span>
                  <span class="item-data">89</span>
                  <span class="item-data">68</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">为</span>
                  <span class="item-data">23</span>
                  <span class="item-data">34</span>
                  <span class="item-data">34</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">请问</span>
                  <span class="item-data">12</span>
                  <span class="item-data">13</span>
                  <span class="item-data">23</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
              <li class="virtual-list-item">
                <div class="virtual-list-content-wrap">
                  <span class="item-label">微软</span>
                  <span class="item-data">80</span>
                  <span class="item-data">34</span>
                  <span class="item-data">23</span>
                  <button class="btn delete-btn">删除</button>
                  <button class="btn update-btn">修改</button>
                </div>
              </li>
            
          </ul>
        </div>
      </div>
    </body>
    </html>
  